<template>
    <el-header :height="height" class="logo">
        <template v-if="isCollapse">
            <el-image :style="{'height':size,'width':size }" v-if="src" :src="src">
                <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                </div>
            </el-image>
            <h3 v-else :style="{'height':size}"> {{title}} </h3>
        </template>
        <template v-else>
            <el-image :style="{'height':size,'width':size }" v-if="src" :src="src">
                <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                </div>
            </el-image>
            <h3 :style="{'height':size}"> {{title}} </h3>
        </template>
    </el-header>
</template>
<script lang="ts">
    import {Component, Prop, Provide, Vue} from "vue-property-decorator";

    @Component
    export default class Logo extends Vue {
        @Prop({default: false}) private isCollapse!: boolean;
        @Prop({default: "50"}) private height!: string;
        @Prop({default: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"}) private src!: string;
        @Provide() private size: string = "45px";
        @Prop({default: "VUE Demo"}) private title!: string;
    }
</script>

<style scoped lang="scss">
    .logo {
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        &h1 {
            overflow: hidden;
            white-space: nowrap;
            margin-left: 5px;
        }
    }
</style>

